﻿@{
    ViewBag.Title = "ScriptTemplate";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
    .comic {
        float:left;
        width:200px;
        background:#000000;
        padding:10px;
        min-height:450px;
        color: #00BB00;
    }
    .comic img {
        border:1px solid blue;
    }
    .comic h3 {
        font-size:24px;
    }
</style>

<h2>Script Template</h2>

<div id="main"> </div>
<script type="text/javascript">
    $(document).ready(function () {
        // data
        var comics = [
            {
                imgSrc: "/Images/cover1.jpg",
                title: "Captain Template1",
                year: "2010",
                number: "1"
            },
            {
                imgSrc: "/Images/cover2.jpg",
                title: "Captain Template2",
                year: "2012",
                number: "2"
            },
            {
                imgSrc: "/Images/cat.jpg",
                title: "Master HaKu&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
                year: "2013",
                number: "3"
            }
        ];

        // use template
        $('#comics').tmpl(comics).appendTo('#main');
    });
</script>

<!-- script template -->
<script id="comics" type="text/x-jquery-tmpl">
  <div class="comic"><img src="${imgSrc}" />
    <div class="details">
      <div class="title">
        <h3>${title}</h3>
      </div>
      <div class="year">
        ${year}
      </div>
      <div class="number">
        ${number}
      </div>
    </div>
  </div>
</script>

